<template>
  <div class="nav_bar">
    <div class="nav_item" v-for="(item,index) in navList" :key="item.txt" @click="navBar(index)">
      <img class="nav_item_img" :src="item.img" alt />
      <span>{{item.title}}</span>
    </div>
  </div>
</template>

<script>
import { getSignPackage } from "api/home";
export default {
  name: "NavBar",
  props: {
    navList: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      navLists: ["/scancode", "/positioning", "/reporting", "/access"],
	  winUrl:'',
    };
  },
  methods: {
    navBar(index) {
      index == 0
        ? this.scanCode()
        : this.$router.push({ path: this.navLists[index] });
    },

    scanCode() {
      let that = this;
      getSignPackage(that.winUrl).then((res) => {
        if (res.code == 200) {
          // 配置 JS-SDK
          that.wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: res.data.signPackage.appId, // 必填，公众号的唯一标识
            timestamp: res.data.signPackage.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.signPackage.nonceStr, // 必填，生成签名的随机串
            signature: res.data.signPackage.signature, // 必填，签名
            jsApiList: [
              "scanQRCode",
            ], // 必填，需要使用的JS接口列表
          });
          that.wx.ready(() => {
            that.wx.scanQRCode({
              needResult: 0,
              scanType: ["qrCode", "barCode"],
              success: function (res) {
                let result = res.resultStr;
              },
              fail: function (res) {
                alert(JSON.stringify(res));
              },
            });
          });
        }
      });
    },
  },
  mounted() {
	  this.winUrl = location.href.split('#')[0] 
  },
};
</script>

<style lang="less" scoped>
.nav_bar {
  display: flex;
  height: 80px;
  .nav_item {
    flex: 1;
    font-weight: 700;
    text-align: center;
    display: flex;
    font-size: 12px;
    flex-direction: column;
    justify-content: space-between;
    .nav_item_img {
      margin: 0 auto;
      width: 58px;
    }
  }
}
</style>